<template>
    <div class="admin-navigator">
        <!-- 导航项 -->
        <div class="navigator-item" v-for="(item, index) in navItems" :key="index">
            <div class="navigator-title" @click="toggleSubmenu(index)">
                <span>{{ item.title }}</span>
                <span v-if="item.subItems" class="toggle-icon">
                    {{ expandedIndex === index ? '-' : '+' }}
                </span>
            </div>
            <!-- 子菜单 -->
            <div v-if="item.subItems && expandedIndex === index" class="submenu">
                <!-- <div class="submenu-item" v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
                    {{ subItem }}
                </div> -->
                <RouterLink v-for="(subItem, subIndex) in item.subItems" :key="subIndex" class="submenu-item"
                    :to="subItem.path">
                    {{ subItem.label }}
                </RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { RouterLink } from 'vue-router';

// 导航数据
const navItems = [
    /*
    {
        title:
        subItems:[
            {lable:'',path:''},
        ]   
    }
    */
    {
        title: '学生管理',
        subItems: [
            { label: '学生账号管理', path: '/admin/stuMangement' }
        ],
    },
    {
        title: '学生组织管理',
        subItems: [
            { label: '学生组织负责人账号管理', path: '/admin/stuOrgAccountRes' },
        ]
    },
    {
        title: '公告管理',
        subItems: [
            { label: '公告管理', path: '/admin/announcementMange' },
        ]
    },
    {
        title: '活动管理',
        subItems: [
            { label: '活动申请审核', path: '/admin/eventApplication' },
            { label: '活动补录申请', path: '/admin/supplementation' },
            { label: '评论管理', path: '/admin/commentMang' },
        ]
    },
    {
        title: '其他',
        subItems: [
            { label: '管理员账号管理', path: '/admin/adminRes' },
            { label: '个人设置', path: '/admin/customSettings' }
        ]
    }
]

// 当前展开的导航项索引
const expandedIndex = ref(null);

// 切换子菜单显示/隐藏
const toggleSubmenu = (index) => {
    expandedIndex.value = expandedIndex.value === index ? null : index;
};
</script>

<style scoped>
.admin-navigator {
    flex-shrink: 0;
    width: 200px;
    height: 100vh;
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
    padding: 5px;
    /*这里的padding是用于设置子元素与该父元素之间的内间距，现在设置为0，那么就没有内间距了*/
}

/* .admin-navigator {
    width: 200px;
    height: 100vh; 
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
    padding: 10px;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} */

.navigator-item {
    margin-bottom: 0px;
    cursor: pointer;
}

/* .navigator-item {
    margin-bottom: 10px;
    cursor: pointer;
    flex: 1; 
    display: flex; 
    align-items: center; 
} */

.navigator-title {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.navigator-title:hover {
    background-color: #f1f1f1;
}

.toggle-icon {
    font-weight: bold;
}

.submenu {
    display: flex;
    /*让子菜单一列显示*/
    flex-direction: column;
    /*让子菜单一列显示*/
    margin-top: 5px;
    padding-left: 15px;
}

.submenu-item {
    display: block;
    /*让子菜单一列显示*/
    text-decoration: none;

    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.3s;
}

.submenu-item:hover {
    background-color: #e9ecef;
}
</style>